

.search{

  .index-head{
    top: 0;
    z-index: 100;
    position: sticky;
    background-color: #fff;
    .search-box{
      height: 100px;
      padding-left: 30px;
      .input-box{
        width: 100%;
        height: 60px;
        padding: 0 30px;
        border-radius: 60px;
        background-color: #f5f5f5;
      }
      .search-icon{
        color: #555;
        padding-right: 20px;
      }
      .search-input{
        flex: 1;
        height: 100%;
        font-size: 24px;
      }
      .placeholder-input{
        color: #999;
      }

      .type-box{

      }
      .type-icon{
        width: 90px;
        height: 90px;
        font-size: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .type-list{
      height: 90px;
      .type-item{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .column-sorter{
        padding: 0 12px;
      }
      .sort-icon{
        color: #999;
        font-size: 16px;
        line-height: 1;
      }
      .sorter-up{
        margin-bottom: -2px;
      }
      .sorter-down{
        margin-top: -2px;
      }
      .active{
        color: #FB4240;
        font-weight: bold;
      }
    }
  }
  .index-body{

  }

  .list-empty{
    height: calc(100vh - 190px);
    position: relative;
  }
}
